<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr>

    <p>count 值：{{ count }}</p>
    <p>money 值：{{ money }}</p>

    <button @click="$store.commit('addOne')" class="btn btn-primary">+1</button>

    <!-- 问题：它会把所有的同名方法从根开始都调用一次 -->
    <!-- 开完命名空间后，默认只会调用根里的 -->
    <button @click="$store.commit('fn')" class="btn btn-primary">调用fn</button>

    <button @click="$store.commit('money/fn')" class="btn btn-primary">调用money-fn</button>
    <button @click="$store.commit('cart/fn')" class="btn btn-primary">调用cart-fn</button>

  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Left',
  computed: {
    // 简化根里面的state
    // ...mapState(['count', 'money'])

    // 找money里的count和money
    ...mapState('money', ['count', 'money'])
  }
}
</script>

<style>
</style>
